<template>
  <el-dropdown class="user-menu" trigger="click" :hide-on-click="false" @command="handleCommand">
    <div class="flex items-center cursor-pointer">
      <img src="@/assets/images/user.png" alt="user" class="user-icon">
      <div class="username">admin</div>
      <el-icon color="#fff"><arrow-down /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
const handleCommand = (command) => {
  if (command === 'logout') {
    // 处理退出逻辑
  }
}
</script>

<style lang="scss" scoped>
.user-menu {
  margin-left: 10px;
  color: #fff;

  .username {
    max-width: 113px;
    font-size: 15px;
    margin: 0 10px;
  }
}
</style>